<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('登录')" />
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <div class="login-box-body">
        <h4 class="login-box-msg" style="margin: 10px auto 5px;">车模商城-管理后台</h4>
        <form id="login-form">
            <div class="form-group">
                <input type="text" class="form-control input-sm" placeholder="用户名" name="username">
            </div>
            <div class="form-group">
                <input type="password" class="form-control input-sm" placeholder="密码" name="password">
            </div>
            <div class="form-group">
                <div class="checkbox icheck">
                    <label>
                        <input type="checkbox" name="rememberme"> 记住我
                    </label>
                </div>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-sm btn-primary btn-block btn-flat" onclick="login()">登录</button>
            </div>
        </form>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    $(function () {
        validateRule();
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' /* optional */
        });
    });

    function login() {
        var json = $.common.formToJSON('login-form');
        $.post('/login', json, function(resp){
            if(resp.code === 0){
                window.location.href = '/index';
            }else{
                layer.alert(resp.msg);
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#login-form").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            messages: {
                username: {
                    required: icon + "请输入您的用户名"
                },
                password: {
                    required: icon + "请输入您的密码"
                }
            }
        })
    }
</script>
</body>
</html>
